<div class="flex items-center mb-4 leading-[18px] text-base font-semibold text-gray-500 uppercase">
  <div class="flex items-center cursor-pointer rounded-md hover:bg-hover-bg"
    (click)="toggleExpand()"
  >
    @if (execution()?.messages?.length) {
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
        class="w-6 h-6 text-text-tertiary"
        [ngClass]="{'rotate-180': expand()}">
        <path d="M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"></path>
      </svg>
    }
    <div class="mr-3">{{'PAC.Xpert.Log' | translate: { Default: 'Log'} }}</div>
  </div>
  <div class="grow w-0 h-px bg-divider-regular"></div>
</div>

@if (expand() && execution()) {
  <div class="flex items-center my-4 leading-[18px] text-sm font-semibold text-gray-500 uppercase">
    <div class="mr-3">{{execution().agent?.title || execution().agent?.name || execution().agentKey}}</div>
    <div class="grow w-0 h-px bg-divider-regular"></div>
  </div>

  @if (execution().summary) {
    <div class="bg-gray-50 px-4 py-2 rounded-lg mb-4">
      <h3 class="font-bold text-gray-500 mb-2">
        <i class="ri-chat-history-line"></i>
        <span class="text-sm">{{ 'PAC.Xpert.Summary' | translate: { Default: 'Summary'} }}</span>
      </h3>
      <p class="text-xs text-gray-600">{{execution().summary}}</p>
    </div>
  }

  @for (message of execution().messages; track $index) {
    <copilot-stored-message [message]="message" class="shrink-0" />
  }
}